.calendar {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d1d1f8;

    .dots {
        position: absolute;
        top: 20px;
        left: 40px;
        width: 60px;
        height: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        li {
            width: 10px;
            height: 10px;
            border-radius: 50%;

            &.dot1 {
                background-color: #fb5c55;
            }
            &.dot2 {
                background-color: #efe82a;
            }
            &.dot3 {
                background-color: #57c026;
                cursor: pointer;
            }
        }
    }

    .wrap {
        position: relative;
        width: 480px;
        height: 500px;
    }
}
